{if $listImages}
<script language="JavaScript" type="text/javascript">
    var listImages = "{$listImages}";
{literal}
    jQuery(document).ready(function() {
        window.top.insertImage(listImages);
        window.top.jQuery("#popup_wrapper_add_image").hide('fast');
    });
{/literal}
</script>
{else}


<h1 id="page_title">Quản lý ảnh</h1>
<div id="msg" align="center">
    Bạn vui lòng nhập đầy đủ tên ảnh để hỗ trợ tìm kiếm tốt
{$msg}
</div>
<table width="99%" bordercolor="#CCCCCC" border="1" cellspacing="0" cellpadding="2" style="border-collapse:collapse;margin: 20px auto">
    <thead>
        <tr>
            <td>
                <div id="file-uploader">
                    <noscript>
                        <p>Vui lòng kích hoạt JavaScript để sử dụng chức năng upload file.</p>
                        <!-- or put a simple form for upload here -->
                    </noscript>
                </div>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr><td id="image_list">
        </td></tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="">
                {$paging}
            </td>
        </tr>
    </tfoot>
</table>
<div id="qq-upload-extra-drop-area"></div>

<script language="JavaScript" type="text/javascript">
    var WEB_DIR = "{$WEB_DIR}";
    var IMAGE_PATH = "{$IMAGE_PATH}";
    {literal}
    jQuery("#overlay_save_name, #button_cancel_name").click(function(){
        jQuery("#popup_wrapper_save_name").hide();
    });

    jQuery("#button_addnew_image").click(function(){
        jQuery("#ManageImageUploadForm").submit();
    });

    jQuery("#button_save_name").click(function(){
        var img_name = jQuery("#img_name");
        var img_id = img_name.attr("data-id");
        var img_name = img_name.val();
        jQuery.post(WEB_DIR+"ajax.php?act=image&code=save_image", {
                img_id: img_id,
                img_name: img_name
            },
            function(msg){
                if(msg == "no_perm"){
                    log_faile ("Bạn không có quyền thực hiện chức năng này.", 5000);
                    return false;
                }
                else if(msg == "not_found"){
                    log_faile ("Không tìm thấy ảnh cần sửa.", 5000);
                    return false;
                }
                else{
                    if(msg=="unsuccess"){
                        log_faile ("Không sửa được.", 5000);
                        return false;
                    }
                    else{
                        var image_item = jQuery("#image_item_"+img_id);
                        image_item.find("img").first().attr({"align":img_name, "title":img_name});
                        jQuery("#image_name_"+img_id).html(img_name);
                        image_item.find("a").last().attr("onclick", "editImage("+img_id+", '"+img_name+"')");
                        var responseJSON = jQuery.parseJSON(msg);
                        if(responseJSON.img_server==1) {
                            var img_url = IMAGE_PATH+"/thumb_w/120/"+responseJSON.img_url;
                        } else {
                            var img_url = WEB_DIR+responseJSON.img_url;
                        }
                        image_item.find("input").first().attr({"data-enable": 1,"data-url": img_url}).show();
                        log_success("Sửa thành công.", 5000);
                    }
                }
            });
        jQuery("#popup_wrapper_save_name").hide('slow');
    });

    function insertImage() {
        var imgs = [];
        var form = document.ManageImageListForm;
        for (var i = 0; i < form.elements.length; i++) {
            if (form.elements[i].name == 'selected_ids[]' && form.elements[i].checked) {
                var ip = jQuery(form.elements[i]);
                if(ip.attr("data-enable"))
                    imgs[imgs.length] = {'id':ip.attr("value"), 'url':ip.attr("data-url")};
                form.elements[i].checked = false;
            }
        }
        if(imgs.length>0) window.top.insertImage(imgs);
        else alert("Bạn chưa chọn ảnh.");
    }
    function removeImageUpload(id){
        var confirmDel = confirm('Bạn có chắc muốn xóa?');
        if (!confirmDel){
            return false;
        }
        jQuery.ajax({
              type: "GET",
              url: "ajax.php?act=image&code=del_new_image",
              dataType: 'json',
              data: {id:id},
              success:function(dataRes) {
                  if (dataRes.success){
                      jQuery('#' + id).remove();
                  }
              }
        });
    }

    function createUploader(){
        if(window!=window.top) {
            jQuery("#page_title").hide();
            jQuery('#addimg').show();
            //var hasImgNoName = false;
            jQuery('input.image_checkbox').each(function(index, element){
                var el = jQuery(element);
                if(!el.attr("data-enable")) {
                    //hasImgNoName = true;
                    el.hide();
                }
            });
            //if(hasImgNoName)
//                jQuery("#msg").html("Bạn cần nhập tên cho ảnh trước khi sử dụng. Vui lòng sử dụng nút \"Sửa\" để nhập tên cho ảnh.");
        }
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader'),
            action: 'ajax.php?act=image&code=add_image',
            params: {},
            multiple: true,
            allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
            sizeLimit: 5 * 1024 * 1024, // max size
            minSizeLimit: 10, // min size
            debug: false,
            extraDropzones: [document.getElementById('qq-upload-extra-drop-area')],
            onSubmit: function(id, fileName){
            },
            onComplete: function(id, fileName, responseJSON){
                //console.log(id, fileName, responseJSON);
                if(responseJSON.success) {
                    if(window!=window.top) var style='style="display:none;"'; else var style="";
                    if(responseJSON.source==1) {
                        var img_url = IMAGE_PATH+"/thumb_w/120/"+responseJSON.fullpath;
                    } else {
                        var img_url = WEB_DIR+responseJSON.fullpath;
                    }
                    fileNameRes = responseJSON.filename.replace('.', '_');
                    
                    var tmp =
                        '<div id="'+fileNameRes+'" class="image_item">'+
                            '<div class="image_wrapper">'+
                            '<img width="120" src="'+img_url+'">'+
                            '</div>'+
                            '<div class="image_main">'+
                                'Tên: <input type="text" name="imagesAdd['+fileNameRes+']" class="image_name">'+
                            '</div>'+
                            '[ <a href="javascript:void(0)" onclick="removeImageUpload(\'' + fileNameRes + '\')">Xóa</a> ]'+
                        '</div>';
                    jQuery("#image_list").prepend(tmp);
                }
                var li = jQuery("#"+fileName.replace('.', '_'));
                if(li) {
                    setTimeout(function() {
                        li.hide('slow', function() {
                            li.remove();
                        });
                    }, 3000);
                }
            }
        });
    }



    // in your app create uploader as soon as the DOM is ready
    // don't wait for the window to load
    window.onload = createUploader;
    {/literal}
</script>
{/if}